<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">

<head>
<meta charset="UTF-8">
<title>接口定义</title>

<link rel="stylesheet" type="text/css"
	href="bootstrap/css/bootstrap.css">
<link rel="stylesheet" type="text/css"
	href="bootstrap/css/bootstrap-table.css">

<link rel="stylesheet" type="text/css"
	href="bootstrap/css/bootstrap-editable.css">
<link rel="stylesheet" type="text/css" href="bootstrap/css/sweetalert2.min.css">
<link rel="stylesheet" type="text/css" href="bootstrap/css/buttons.css">

</head>

<body>
	<div th:insert="~{header :: copy}"></div>

	<div class="panel panel-default" style="padding-top: 80px;margin-left: 50px;margin-right: 50px;border: 0px">
		<div class="panel-heading" style="background: white">
			<font size="5px">接口定义</font>
			<button style="float: right;width: 90px;height: 35px;" onclick="refreshConfigurations()">刷新配置</button>
		</div>
		<div class="panel-body">
			<div id="toolbar" class="btn-group">
				<button id="btn_add" type="button" class="btn btn-default"
					data-toggle="modal" data-target="#addModel">
					<span class="glyphicon glyphicon-plus" aria-hidden="true"></span>新增
				</button>
			</div>
			<table id="table"></table>
		</div>
	</div>

	<div id="addModel" class="modal fade" tabindex="-1" role="dialog"
		aria-labelledby="myModalLabel" aria-hidden="true">
		<div class="modal-dialog modal-lg">
			<div class="modal-content" style="width: 500px; align-self: center;">
				<div class="modal-header">
					<button type="button" class="close" data-dismiss="modal"
						aria-hidden="true"></button>
					<h4 class="modal-title">
						<i class="icon-pencil"></i> <span id="lblAddTitle"
							style="font-weight: bold">添加API定义</span>
					</h4>
				</div>
				<div class="modal-body" style="text-align: center;">
					<form id='searchForm' action="apiDefine/saveOrUpdate"
						class="bs-example bs-example-form" role="form"
						style="align-self: center;">
						<div class="input-group">
							<span class="input-group-addon" style="width: 100px"><i
								class="icon-th">ID</i></span>
								<input type="text" class="form-control"
								name="id" id="apiDefine-id" onblur="validateEmptyContent('apiDefine-id', 'idMsgSpan')">
							<span class="input-group-addon" id="idMsgSpan" style="width: 150px;border:1px; background:#FFF"></span>
						</div>
						<div class="input-group">
							<span class="input-group-addon" style="width: 100px">
								<i class="icon-th">商户编号</i>
							</span> 
							<input type="text" class="form-control"
								name="parnterCode" id="apiDefine-parnterCode" onblur="validateEmptyContent('apiDefine-parnterCode','parnterCodeMsgSpan')" placeholder="abc">
							<span class="input-group-addon" id="parnterCodeMsgSpan" style="width: 150px;border:1px; background:#FFF"></span>
						</div>
						<div class="input-group">
							<span class="input-group-addon text-center" style="width: 100px">源路径格式<i
								class="icon-th"></i></span> <input type="text" class=" form-control"
								name="path" id="apiDefine-path" onblur="validateEmptyContent('apiDefine-path','pathMsgSpan')">
							<span class="input-group-addon" id="pathMsgSpan" style="width: 150px;border:1px; background:#FFF"></span>
						</div>
						<div class="input-group">
							<span class="input-group-addon text-center" style="width: 100px"><i
								class="icon-th">服务ID</i></span> <input type="text"
								class=" form-control" name="serviceId" id="apiDefine-serviceId" onblur="validateEmptyContent('apiDefine-serviceId','serviceIdMsgSpan')">
							<span class="input-group-addon" id="serviceIdMsgSpan" style="width: 150px;border:1px; background:#FFF"></span>
						</div>
						<div class="input-group">
							<span class="input-group-addon text-center" style="width: 100px"><i
								class="icon-th">路由路径</i></span> <input type="text"
								class=" form-control" name="url" id="apiDefine-url" onblur="validateEmptyContent('apiDefine-url','urlMsgSpan')">
							<span class="input-group-addon" id="urlMsgSpan" style="width: 150px;border:1px; background:#FFF"></span>
						</div>
						<div class="input-group">
							<span class="input-group-addon text-center" style="width: 100px"><i
								class="icon-th">重试次数</i></span> <input type="text"
								class=" form-control" name="retryable" id="apiDefine-retryable" onblur="validateLegalNumber('apiDefine-retryable', 'retryableMsgSpan')">
							<span class="input-group-addon" id="retryableMsgSpan" style="width: 150px;border:1px; background:#FFF"></span>
						</div>
						<div class="input-group">
							<span class="input-group-addon text-center" style="width: 100px"><i
								class="icon-th">stripPrefix</i></span> <input type="text"
								class=" form-control" name="stripPrefix"
								id="apiDefine-stripPrefix" onblur="validateLegalNumber('apiDefine-stripPrefix','stripPrefixMsgSpan')">
							<span class="input-group-addon" id="stripPrefixMsgSpan" style="width: 150px;border:1px; background:#FFF"></span>
						</div>
						<div class="input-group">
							<span class="input-group-addon text-center" style="width: 100px"><i
								class="icon-th">API名称</i></span> <input type="text"
								class=" form-control" name="apiName" id="apiDefine-apiName" onblur="validateEmptyContent('apiDefine-apiName','apiNameMsgSpan')">
							<span class="input-group-addon" id="apiNameMsgSpan" style="width: 150px;border:1px; background:#FFF"></span>
						</div>
						<div class="input-group">
							<span class="input-group-addon text-center" style="width: 100px"><i
								class="icon-th">回退地址</i></span> <input type="text"
								class=" form-control" name="fallbackUrl"
								id="apiDefine-fallbackUrl" onblur="validateEmptyContent('apiDefine-fallbackUrl','fallbackUrlMsgSpan')">
							<span class="input-group-addon" id="fallbackUrlMsgSpan" style="width: 150px;border:1px; background:#FFF"></span>
						</div>
						<div class="input-group">
							<span class="input-group-addon text-center" style="width: 100px">
								<i class="icon-th">是否可用</i>
							</span>
							<select style="height: 28px" name = "enabled" id="apiDefine-enabled">
								<option value="1">是</option>
								<option value="0" selected="selected">否</option>
							</select>
						</div>
					</form>
				</div>
				<div class="modal-footer">
					<input type="hidden" id="ID" name="ID" />
					<button type="submit" class="btn btn-primary"
						onclick="addApiDefine()" data-dismiss="modal">确定</button>
					<button type="button" class="btn green" data-dismiss="modal">取消</button>
				</div>
			</div>
		</div>
	</div>

</body>
<script src="bootstrap/js/jquery.min.js"></script>
<script src="bootstrap/js/jquery-ui.min.js"></script>
<script src="bootstrap/js/bootstrap.js"></script>
<script src="bootstrap/js/bootstrap-table.js"></script>
<script src="bootstrap/js/bootstrap-editable.min.js"></script>

<script src="bootstrap/js/bootstrap-table-editable.js"></script>
<script src="bootstrap/js/sweetalert2.all.min.js"></script>
<script src="bootstrap/js/gateway.js"></script>
<script type="text/javascript">

// 将事件监听的事件改成show.bs.modal 即可解决
    $('#addModel').on('show.bs.modal', function (e) {
      // 关键代码，如没将modal设置为 block，则$modala_dialog.height() 为零
      $(this).css('display', 'block');
      var modalHeight=$(window).height() / 2 - $('#addModel .modal-dialog').height() / 2;
      var modalWidth=$(window).width() / 2 - $('#addModel .modal-content').width() / 2;
      $(this).find('.modal-dialog').css({
          'margin-top': modalHeight,
          'margin-left':modalWidth
      });
  });

</script>
<script type="text/javascript">
	function addApiDefine() {
		var id = $("#apiDefine-id").val();
		var parnterCode = $("#apiDefine-parnterCode").val();
		var path = $("#apiDefine-path").val();
		var serviceId = $("#apiDefine-serviceId").val();
		var url = $("#apiDefine-url").val();
		var retryable = $("#apiDefine-retryable").val();
		var enabled = $("#apiDefine-enabled").val();
		var stripPrefix = $("#apiDefine-stripPrefix").val();
		var apiName = $("#apiDefine-apiName").val();
		var fallbackUrl = $("#apiDefine-fallbackUrl").val();

		var data = {
				id : id,
				parnterCode : parnterCode,
				path : path,
				serviceId : serviceId,
				url : url,
				retryable : retryable ,
				enabled : enabled,
				stripPrefix : stripPrefix,
				apiName : apiName,
				fallbackUrl : fallbackUrl
			}
		
		saveOrUpdateGateWayConfigurations(data, "/apiDefine/saveOrUpdate", "add");
		
	}
	
	function refreshConfigurations() {
		$.ajax({
			type : "post",
			url : "apiDefine/refreshConfiguration",
			dataType : 'JSON',
			success : function(data) {
				if (data.status == "SUCCESS") {
					Swal({
			                title: '配置刷新成功',
			                type:"success"
			            });
				} else {
					Swal({
		                title: '配置刷新失败：' + data.message,
		                type:"error"
					});
				}
				// 刷新页面
			},
			error : function() {
				Swal({
	                title: '配置刷新失败：' + data.message,
	                type:"error"
				});
			}

		});
	}
	
</script>
<script>
	$(function() {
		$("#addModel").draggable();//为模态对话框添加拖拽
		var curRow = {};
		
		$('#table').bootstrapTable({
			url : '/apiDefine/listAll',
			pagination : true,
			pageSize : 10,
			pageNumber : 1,
			search : true,
			searchAlign : "right",
			toolbar : "#toolbar",
			columns : [ {
				field : 'id',
				title : 'id'
			}, {
				field : 'parnterCode',
				title : '商户编号',
				editable : {
					type : 'text',
					title : '商户编号',
					validate : function(v) {
						if (!v)
							return '商户编号不能为空';

					}
				}
			}, {
				field : 'path',
				title : '路径',
				editable : {
					type : 'text',
					title : '路径',
					validate : function(v) {
						if (!v)
							return '路径不能为空';

					}
				}
			}, {
				field : 'serviceId',
				title : '服务ID',
				editable : {
					type : 'text',
					title : '服务ID',
					validate : function(v) {
						if (!v)
							return '服务ID不能为空';

					}
				}
			}, {
				field : 'url',
				title : 'URL',
				editable : {
					type : 'text',
					title : 'URL',
					validate : function(v) {
						if (!v)
							return 'URL不能为空';

					}
				}
			}, {
				field : 'retryable',
				title : '重试次数',
				editable : {
					type : 'text',
					title : '重试次数',
					validate : function(v) {
						var numRegex = new RegExp("\\d+");
						if(!v.match(numRegex))
							return '重试次数只能为数字';
						if(v < 0)
							return "重试次数只能为大于等于0的整数"
					}
				}
			}, {
				field : 'enabled',
				title : '是否可用',
				editable : {
                    type: 'select',
                    title: '是否可用',
                    source:[{value:"1",text:"是"},{value:"0",text:"否"}]
				}
			}, {
				field : 'stripPrefix',
				title : 'stripPrefix',
				editable : {
					type : 'text',
					title : 'stripPrefix',
					validate : function(v) {
						var numRegex = new RegExp("\\d+");
						if(!v.match(numRegex))
							return 'stripPrefix只能为数字';
						if(v < 0)
							return "stripPrefix只能为大于等于0的整数"
					}
				}
				
			}, {
				field : 'apiName',
				title : 'API名称',
				editable : {
					type : 'text',
					title : 'API名称',
					validate : function(v) {
						if (!v)
							return 'API名称不能为空';

					}
				}
			}, {
				field : 'fallbackUrl',
				title : '回退地址',
				editable : {
					type : 'text',
					title : '回退地址',
					validate : function(v) {
						if (!v)
							return '回退地址不能为空';

					}
				}
			}, {
				field : 'formatCreateTime',
				title : '创建时间'
			}, {
				field : 'formatUpdateTime',
				title : '修改时间'
			} ],
			onClickRow : function(row, $element) {
				curRow = row;
			},
			onEditableSave : function(field, row, oldValue, $el) {
				var data = {
						id:row.id,
						apiName : row.apiName,
						enabled : row.enabled,
						stripPrefix : row.stripPrefix,
						fallbackUrl : row.fallbackUrl,
						parnterCode : row.parnterCode,
						path : row.path,
						retryable : row.retryable,
						serviceId : row.serviceId,
						url : row.url
					}
				
				saveOrUpdateGateWayConfigurations(data, "/apiDefine/saveOrUpdate", "update");
			}
		});
	});
</script>

</html>